<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title> View Event Location </title>
<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA4UpO3QHcY_zG5hMHyAe7DBQhHrv_XY-dqaEy2Kq__M1u9iO05xSD6JoKpTyaPXFTIgP5PR7Wc3db0Q" 
            type="text/javascript"></script>
<script language="JavaScript" src="script/ts_picker.js">
</script>
    <script type="text/javascript">

    var map;
    var geocoder;
    var address;
    var longitude;
    var latitude;
    var locName;
    
    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(65.619188,22.141056), 14);
      map.setUIToDefault();
      GEvent.addListener(map, "click", getAddress);
      geocoder = new GClientGeocoder();
    }
    
    function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }

    function showAddress(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Status Code:" + response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
        '<b>orig latlng:</b>' + response.name + '<br/>' + 
        '<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
        '<b>Status Code:</b>' + response.Status.code + '<br>' +
        '<b>Status Request:</b>' + response.Status.request + '<br>' +
        '<b>Address:</b>' + place.address + '<br>' +
        '<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
        '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
        setLati(place.Point.coordinates[0]);
        setLong(place.Point.coordinates[1]);
        setLocName(place.address);
        //alert(getLat() + "," + getLong());
      }
    }
    
    function setLong(longi){
         longitude = longi;
    }
    function setLati(lat){
         latitude = lat;
    }
    function setLocName(add){
         locName = add;
    } 
    function getLat(){
        return latitude;
    }
    function getLong(){
           return longitude;
    }
    function getLocName(){
        return locName;
    } 
    function setLongLati(){
             document.event_frm.longitude.value=getLong();
             document.event_frm.latitude.value=getLat();
             document.event_frm.locationName.value=getLocName();

             alert("longitude: "+document.event_frm.longitude.value+"\nlatitude: "+document.event_frm.latitude.value+"\nAddress :"+document.event_frm.locationName.value);
    }

    </script>
</head>

<body onload="initialize()" > 

<h1>View Event Location</h1>
<div id="layout_1">
 <div id="content" class=".">
<!--<form action="/submit-event.php" method="post"> -->

<table border="2" cellpadding="3" class="standard">
</tr>
   <tr>
  <th class="subr">Select User</th>
  <td>
   <select name="category" class="max">
<option value="0" selected="selected">- Select a User -</option>
<option value="1">Arif</option>
<option value="2">Arman</option>
<option value="3">Russel</option>
<option value="4">Mohsin</option>
<option value="5">Ashkan</option>
   </select>
  </td>
 </tr>
 </tr>
   <tr>
  <th class="subr">Select Event</th>
  <td>
   <select name="category" class="max">
<option value="0" selected="selected">- Select a category -</option>
<option value="1">Party</option>
<option value="2">Conference</option>
<option value="3">Training</option>
<option value="4">Birthday</option>
<option value="5">Other</option>
   </select>
  </td>
 </tr>
  <tr>
  <th class="subr">Location View </th>
  <td>
  <div id="map_canvas" style="width: 500px; height: 400px"></div>
   <input type=hidden value="0" name="longitude">
   <input type=hidden value="0" name="latitude">
   <input type=hidden value="" name="locationName">
  </td>
 </tr>
 <tr>
  <th colspan="2">
    <input type="submit" name="action" value="View" />
    <input type="reset" value="Clear"></input>

  </th>
 </tr>
 </table>
</form>

 </div>
 <div class="cleaner">&nbsp;</div>
</div>
</div>
</body>
</html>